<template>
    <div class="already-list">
        <div class="btn">
            <el-button @click="returnDrawer = true">申请退货</el-button>
            <el-button @click="exchangeDrawer = true">申请换货</el-button>
            <el-button @click="repairDrawer = true">申请补货</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%"
             :height="500" ref="table" :header-cell-style="{background:'#eee',color:'#000'}">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="waybillNo" label="运单号" width="150">
                <template slot-scope="scope">
                    <div style="color:#004FEE;">{{ scope.row.waybillNo }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="150">
                <template slot-scope="scope">
                    <div><div style="width:8px;height:8px;background:#32B457;margin-right:5px;border-radius: 50%;display:inline-block;"></div>{{ scope.row.status }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="model" label="型号" width="150"> </el-table-column>
            <el-table-column prop="brand" label="品牌" width="150"> </el-table-column>
            <el-table-column prop="number" label="数量" width="150">
            </el-table-column>
            <el-table-column prop="batch" label="批次" width="150"> </el-table-column>
            <el-table-column prop="package" label="封装" width="150">
            </el-table-column>
            <el-table-column prop="currency" label="币种" width="150">
            </el-table-column>
            <el-table-column prop="price" label="单价" width="150">
                <template slot-scope="scope">
                    <div style="color: #009D2C;">{{ scope.row.price }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="money" label="订单金额" width="150">
                <template slot-scope="scope">
                    <div style="color:#FF7600;">{{ scope.row.money }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="交货地" width="150">
            </el-table-column>
            <el-table-column prop="MPQ" label="MPQ" width="150"> </el-table-column>
            <el-table-column prop="packing" label="包装" width="150">
            </el-table-column>
            <el-table-column prop="id" label="订单项" width="150"> </el-table-column>
            <el-table-column prop="desc" label="备注" width="150"> </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination class="pagination" layout="total,sizes,prev, pager, next,jumper" :total="50">
        </el-pagination>
        <!-- 申请退货 -->
        <ReturnDrawer :return-drawer="returnDrawer" @close="returnClose"/>
        <!-- 申请换货 -->
        <ExchangeDrawer :exchange-drawer="exchangeDrawer" @close="exchangeClose"/>
        <!-- 申请补货 -->
        <RepairDrawer :repair-drawer="repairDrawer" @close="repairClose"/>
    </div>
</template>

<script>
import ReturnDrawer from "./returnDrawer.vue"
import ExchangeDrawer from "./exchangeDrawer.vue";
import RepairDrawer from './repairDrawer.vue';
    export default {
        name:'alreadyList',
        data() {
        return {
            returnDrawer:false,
            exchangeDrawer:false,
            repairDrawer:false,
            tableData: [
                {
                    waybillNo: "SF22020000295",
                    status: "已收货",
                    model: "H1",
                    brand: "KEMET",
                    number: "100",
                    batch: "1",
                    package: "XXXW95",
                    currency: "人民币",
                    price: "10",
                    money: "10000",
                    address: "国内",
                    MPQ: "1",
                    packing: "散装",
                    id: "DD2202000295-001",
                    desc: "",
                },
                {
                    waybillNo: "SF22020000295",
                    status: "已收货",
                    model: "H1",
                    brand: "KEMET",
                    number: "100",
                    batch: "1",
                    package: "XXXW95",
                    currency: "人民币",
                    price: "10",
                    money: "10000",
                    address: "国内",
                    MPQ: "1",
                    packing: "散装",
                    id: "DD2202000295-001",
                    desc: "",
                },
                {
                    waybillNo: "SF22020000295",
                    status: "已收货",
                    model: "H1",
                    brand: "KEMET",
                    number: "100",
                    batch: "1",
                    package: "XXXW95",
                    currency: "人民币",
                    price: "10",
                    money: "10000",
                    address: "国内",
                    MPQ: "1",
                    packing: "散装",
                    id: "DD2202000295-001",
                    desc: "",
                },
            ],
        }
    },
    components:{
        ReturnDrawer,
        ExchangeDrawer,
        RepairDrawer
    },
    methods:{
        returnClose(){
            this.returnDrawer = false;
        },
        exchangeClose(){
            this.exchangeDrawer = false;
        },
        repairClose(){
            this.repairDrawer = false;
        }
    }
    }
</script>

<style scoped lang="scss">
.already-list{
    .pagination {
    margin-top: 10px;
    text-align: right;
  }
  .btn{
        margin-bottom: 16px;
    }
}
</style>